import './index.scss';

import { useCallback, useEffect, useState } from 'react';

import { Spin } from 'antd';

import type { HomeStatistics } from '@/api/homeApi';
import { homeStatistics } from '@/api/homeApi';

import DeviceView from './modules/DeviceView';
import MessageView from './modules/MessageView';
import Recently from './modules/Recently';
import TotalList from './modules/Total';
import WarningView from './modules/WarningView';

/**
 * 仪表板查询参数接口
 */
interface DashboardParams {
  /** 告警统计天数 */
  alarmCountDays: number;
  /** 消息统计天数 */
  msgCountDays: number;
}

/**
 * 平台概览仪表板组件
 * 展示物联网平台的核心指标数据，包括设备统计、消息统计、告警统计等
 */
const Dashboard = () => {
  // 查询参数状态
  const [params, setParams] = useState<DashboardParams>({
    alarmCountDays: 7, // 告警统计天数，默认7天
    msgCountDays: 7, // 消息统计天数，默认7天
  });

  // 数据状态
  const [data, setData] = useState<HomeStatistics>({});
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  /**
   * 获取仪表板数据
   */
  const fetchData = useCallback(async () => {
    try {
      setLoading(true);
      setError(null);

      const res = await homeStatistics(params);

      if (res.success && res.data) {
        setData(res.data);
      } else {
        setError(res.message || '获取数据失败');
        window.$message.error(res.message || '获取仪表板数据失败');
      }
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : '获取数据失败，请稍后重试';
      setError(errorMessage);
      console.error('获取仪表板数据失败:', err);
      window.$message.error(errorMessage);
    } finally {
      setLoading(false);
    }
  }, [params]);

  // 监听参数变化，重新获取数据
  useEffect(() => {
    fetchData();
  }, [fetchData]);
  /**
   * 处理消息统计天数变化
   * @param msgCountDays 新的消息统计天数
   */
  const handleMessageDaysChange = useCallback((msgCountDays: number) => {
    setParams(prev => ({ ...prev, msgCountDays }));
  }, []);

  /**
   * 处理告警统计天数变化
   * @param alarmCountDays 新的告警统计天数
   */
  const handleAlarmDaysChange = useCallback((alarmCountDays: number) => {
    setParams(prev => ({ ...prev, alarmCountDays }));
  }, []);

  // 错误状态渲染
  if (error && !loading) {
    return (
      <div className="page-wrapper">
        <div className="page-title">
          <div className="page-main-title">平台概览</div>
          <div className="page-sub-title">以数据卡片和数据图表形式，展示物联网平台核心接入指标</div>
        </div>
        <div className="page-content-box dashboard-page pb-16px">
          <div className="flex items-center justify-center h-64 text-gray-500">
            <div className="text-center">
              <div className="text-lg mb-2">数据加载失败</div>
              <div className="text-sm mb-4">{error}</div>
              <button
                onClick={fetchData}
                className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
              >
                重新加载
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="page-wrapper">
      <div className="page-title">
        <div className="page-main-title">平台概览</div>
        <div className="page-sub-title">以数据卡片和数据图表形式，展示物联网平台核心接入指标</div>
      </div>
      <div className="page-content-box dashboard-page pb-16px">
        <Spin spinning={loading} tip="加载数据中...">
          {/* 总览统计卡片 */}
          <TotalList data={data} />

          {/* 设备分布和状态统计图表 */}
          <DeviceView data={data} />

          {/* 快捷入口和最近访问 */}
          <Recently data={data} />

          {/* 消息量统计图表 */}
          <MessageView data={data} onChange={handleMessageDaysChange} />

          {/* 告警统计图表 */}
          <WarningView data={data} onChange={handleAlarmDaysChange} />
        </Spin>
      </div>
    </div>
  );
};

export default Dashboard;
